<template>
	<view>
		<navbar :back="true" title="历史会议" color="#fff" leftIconColor="#fff"/>
        <view style="position: fixed;z-index: 20000;left: 0;width: 100%;background-color:#3277fc;padding:20rpx 0;">
           <view  style="background-color: rgba(167, 167, 167,.2);border-radius: 26rpx;margin:0 40rpx;">
				<u-search placeholder="输入会议主题名称" v-model="params.keyword" shape="round" :showAction="false" @search="search"  bgColor='#fff' color='#000' searchIcon='search' placeholderColor='##a5a5a5' searchIconColor='#a5a5a5'>
				</u-search>
           </view>
        </view>
       <view style="height: 106rpx;"></view>
		<view v-if="list.length>0" style="padding: 25rpx;">
			<block v-for="(item,index) in list" :key="index">
				<view class="p-20 item" @tap="goDetail(item.id)">
					<image :src="item.image" mode="" style="width: 200rpx;height: 200rpx;"></image>
					<view class="m-l-20 " style="font-size: 30rpx;width:65%;">
						<view
							style="line-height: 30rpx;color: rgba(49, 51, 64, 1);font-size: 29.17rpx;font-weight: 650;">
							{{item.name}}
						</view>
						<view style="display: flex;justify-content:space-between;align-items: center;margin-top: 10rpx;">
							<view style="display: flex;align-items: center;margin: 8rpx 0;">
								  <view style="font-size:24rpx;color: #a9a9a9;">{{item.beginTime}}</view>
								  <view style="font-size: 24rpx;color: #a9a9a9;margin-left: 20rpx;">{{item.week}}</view>
							</view>
							<view style="font-size: 24rpx;color: #a9a9a9;">{{item.city}}</view>
						</view>
						<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 30rpx;">
							<view style="display: flex;align-items: center;">
							   <view style="font-size: 20rpx;border: 2rpx solid #fc6161;color: #fc6161;padding:4rpx 6rpx 6rpx 6rpx;border-radius: 58rpx;margin-right: 10rpx;" v-if="item.people-item.makeNum<=0">满</view>
							   <view style="font-size: 24rpx;color:#75a3fd;">{{item.makeNum}}</view>
							   <view style="font-size: 24rpx;color: #a9a9a9;">/{{item.people}}</view>
							</view>
							<view v-if="item.isMake!=null">
							   <view style="padding: 12rpx 54rpx;background-color:#3277fc;color: #fff;font-size: 22rpx;border-radius: 28rpx;" v-if='item.isMake==1&item.statue==0' @click.stop="goCard(`/pages/sub/store/application?orderId=${item.orderId}&Id=${item.id}`)">报名 </view>
							   <view style="padding: 10rpx 40rpx;border:2rpx solid #77a4fc;color:#77a4fc;font-size: 22rpx;border-radius: 28rpx;" v-if='item.isMake==0&item.statue==0' @click.stop="showTow('你已报名参加,请暂且等待会议开始')">已报名</view>
							   <view style="padding: 10rpx 40rpx;background-color: #b7c3c7;color: #fff;font-size: 22rpx;border-radius: 28rpx;" v-if='item.statue==2' @click.stop="showTow('会议已结束了哦,请看看其他会议吧')">已结束</view>
							   <view style="padding: 10rpx 40rpx;background-color:#fcab32;color: #fff;font-size: 22rpx;border-radius: 28rpx;" v-if='item.statue==1' @click.stop="showTow('会议已开始')">进行中</view>
							</view>
							<view v-else>
								   <view style="padding: 12rpx 54rpx;background-color: red;color: #fff;font-size: 22rpx;border-radius: 28rpx;"  @click.stop="goCard(`/pages/sub/store/application?orderId=${item.orderId}&Id=${item.id}`)">报名 </view>
							</view>
						</view>
					</view>
				</view>
			</block>

			<loading class="m-t-20 m-b-20" :loading="loading" :loadend="loadend" />
		</view>
		<u-empty v-else text="暂无历史会议" mode="list"></u-empty>
	</view>
</template>

<script>
	import {
		getIndexList
	} from "@/api/make.js"
	import priceStyle from '@/components/priceStyle.vue'
	import loading from "@/components/loading.vue"
	import navbar from '@/components/baseNavbar.vue'
	export default {
		components: {
			loading,
			priceStyle,
			navbar
		},
		data() {
			return {
				params: {
					limit: 10,
					page: 1,
					statue:2,
					city:'',
					district:'',
					beginTime:'',
					cateld:'',
					childCateId:'',
					load: true,
					keyword:''
				},
				list: [],
			}
		},
		onShow() {
			this.resetList()
		},
		methods: {
			search(e){
				this.params.keyword = e
				this.resetList()
			},
			resetList() {
				this.params.page = 1
				this.list=[]
				this.getList()
			},
			getList() {
				if (!this.params.load) {
					return;
					
				}
				this.params.load = false;
				console.log('列表，参数',this.params);
				getIndexList(this.params).then(res => {
					this.params.page++
					this.list = this.list.concat(res.data.list)
					this.params.load = true
				})
			
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/sub/store/detail?id=' + id
				})
			},
			
			
		},
		onReachBottom() {

			if (!this.loadend && !this.loading)
				this.getList()

		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 243, 245, 1);
	}
</style>
<style scoped lang="scss">
	.item {
		background: rgba(255, 255, 255, 1);
		border-radius: 12.5rpx;
		margin-bottom: 20rpx;
        display: flex;
	}

	.name {
		color: rgba(65, 68, 79, 1);
		font-size: 29.17rpx;
		line-height: 37.5rpx;
	}

	.right {
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
	}

	.price {
		color: rgba(39, 40, 42, 1);
		font-size: 25rpx;
	}

	.btn {
		width: 100rpx;
		line-height: 38rpx;
		border: 2.08rpx solid #4e8afc;
		border-radius: 20rpx;
		text-align: center;
		color: #4e8afc;
		font-size: 20.83rpx;
	}

	.item1 {
		margin-bottom: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 4.17rpx 8.33rpx rgba(0, 0, 0, 0.02);
		border-radius: 12.5rpx;
		padding: 0 25rpx;
	}

	

	.item-body {
		padding: 20rpx;

	}
</style>
